import React, { Component } from 'react'
import axios from 'axios';
import pubsub from "pubsub-js"

export default class HeroList extends Component {
    state = {
        heros: []
    }
    render() {
        return (
            <div className="hero-list">
                {
                    this.state.heros.map(item => {
                        return <div key={item.id} className="item">
                            <img src={"http://cdn.xiaohigh.com" + item.image} alt="" />
                            <p>{item.name}</p>
                        </div>
                    })
                }
            </div>
        )
    }

    async componentDidMount() {
        let result = await axios("http://api.xiaohigh.com/heros");
        this.setState({
            heros: result.data
        })
        pubsub.subscribe("keywords", async (_, data) => {
            let result = await axios("http://api.xiaohigh.com/heros", {
                params: {
                    name_like: data
                }
            })
            this.setState({
                heros: result.data
            })
        })
    }

}
